{% extends "base/base.html" %}
{% block title %}
Swarm | SwarmOps - Docker管理平台
{% endblock %}
{% block container %}
{% set UpdateManager = True if request.args.get("UpdateManager", False) in ('true', 'True', True) else False %}
{% set Swarms = g.swarm.getSwarm(checkState=true, UpdateManager=UpdateManager) %}
{% set ActiveSwarm = g.swarm.getActive %}
{% if not Swarms %}
<div class="alert alert-warning" role="alert"><i class="icon-info-sign"></i> 当前系统无集群!!!</div>
{% endif %}
{% if not ActiveSwarm %}
<div class="alert alert-danger" role="alert"><i class="icon-remove-sign"></i> 当前系统无活跃集群!!!</div>
{% endif %}
<p>
    <a href="{{ url_for('ui.index') }}"><button type="button" class="btn btn-default"><i class="icon-repeat"></i> Reload</button></a>
    <a href="javascript:SwarmAdd()"><button type="button" class="btn btn-success">添加集群</button></a>
    <a href="javascript:SwarmInit()"><button type="button" class="btn btn-primary">初始化集群</button></a>
</p>
<table class="table table-bordered table-hover table-condensed table-responsive">
    <thead>
        <tr class="active">
            <th style="vertical-align: middle; text-align: center;">isActive</th>
            <th style="vertical-align: middle; text-align: center;">Name</th>
            <th style="vertical-align: middle; text-align: center;">Manager</th>
            <th style="vertical-align: middle; text-align: center;">State</th>
            <th style="vertical-align: middle; text-align: center;">Token</th>
            <th style="vertical-align: middle; text-align: center;">Operations</th>
        </tr>
    </thead>
    <tbody>
    {% for swarm in Swarms %}
        <tr>
        {%- if swarm.name == ActiveSwarm.name %}
            <td style="vertical-align: middle; text-align: center;"><attr title="当前为活跃集群" class="icon-ok icon-large text-success"></attr></td>
        {% else %}
            <td style="vertical-align: middle; text-align: center;"><a href='javascript:setActive("{{ swarm.name }}")'><attr title='升级为活跃集群' class='icon-arrow-up icon-large text-primary'></attr></a></td>
        {% endif -%}
            <td style='vertical-align: middle; text-align: center;'>{{ swarm.name }}</td>
            <td style='vertical-align: middle; text-align: center;'>
            {% set leader = g.swarm.getOneLeader(swarm.name) %}
            {% for m in swarm.manager %}
                {% if m == leader %}
                    <code>{{ m }}</code>
                {% else %}
                    <em>{{ m }}</em>
                {% endif %}
                <br/>
            {% endfor %}
            </td>
            {% if swarm.state == "Healthy" %}
            <td style='vertical-align: middle; text-align: center;' class="text-success">{{ swarm.state }}</td>
            {% else %}
            <td style='vertical-align: middle; text-align: center;' class="text-danger">{{ swarm.state }}</td>
            {% endif %}
            <td style='vertical-align: middle; text-align: center;'>
                {{ "Worker: {}".format(swarm.workerToken) }}
                <br/>
                {{ "Manager:  {}".format(swarm.managerToken) }}
                <br/>
            </td>
            <td style='vertical-align: middle; text-align: center;'>
                &nbsp;&nbsp;<a class="btn btn-xs btn-info" href="{{ url_for('ui.index', UpdateManager=true) }}"><i class="icon-refresh icon-large icon-spin"></i>&nbsp;同步</a>
                <br/>
                &nbsp;&nbsp;<a class="btn btn-xs btn-danger" href="javascript:SwarmDelete('{{ swarm.name }}')"><i class="icon-trash icon-large"></i>&nbsp;删除</a>
                <br/>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>
{% endblock %}
{% block script %}
<script type="text/javascript">
// Swarm集群数量
document.getElementById("swarm_number").innerHTML={{ g.swarm.getSwarm()|length }};

// 更新导航
var NavId=null;
var As=document.getElementById('tab').getElementsByTagName('li');
NavId = As[0];
console.log(NavId)
NavId.className='active';

// 设置活跃集群
function setActive(name) {
    $.ajax({
        url: "{{ url_for('apis.core.swarm', setActive=True) }}&name=" + name,
        method: 'PUT',
        datatype: 'json',
        success: function(res) {
            console.log(res);
            if (res.success==true) {
                layer.msg("设置活跃集群成功！", {icon: 1});
            } else {
                layer.msg("设置活跃集群失败！", {icon: 2, time: 15*1000});
            }
            window.location.reload();
        },
        error: function(error){
            console.log(error);
        }
    });
}

// 询问框、iframe层删除单个服务
function SwarmDelete(name) {
    layer.confirm('你确定要删除此集群?', {
        btn: ['确认删除','我再想想']
    }, function(){
        console.warn("将要删除集群"+name);
        if (name) {
            $.ajax({
                url: "{{ url_for('apis.core.swarm') }}",
                method: 'DELETE',
                async: false,
                datatype: 'json',
                data: {"name": name},
                success: function(res) {
                    console.log(res);
                    if (res.success==true) {
                        layer.msg("Delete Swarm Successfully", {icon: 1, time: 3*1000});
                        document.location.reload(); //重载当前页面
                    } else {
                        layer.msg("Delete Swarm Failed. "+res.msg, {icon: 2, time: 15*1000});
                    }
                },
            });
        };
    }, function() {
        console.log("canel");
    });
}

// iframe层添加集群
function SwarmAdd() {
    layer.open({
        type: 2,
        title: '添加集群',
        shadeClose: true,
        shade: 0.8,
        area: ['800px', '90%'],
        content: '{{ url_for("ui.swarm_add") }}'
    });
}

// iframe层初始化集群
function SwarmInit() {
    layer.open({
        type: 2,
        title: '初始化集群',
        shadeClose: true,
        shade: 0.8,
        area: ['800px', '90%'],
        content: '{{ url_for("ui.swarm_init") }}'
    });
}
</script>
{% endblock %}
